<template>
  <div id="myActivity">
    <div class="acti-main">
      <div class="acti-bar">
        <el-tabs type="border-card">
          <el-tab-pane label="进行中">
           <div class="acti_lists">
            <Card :item="item" class="card" v-for="item in activity":key="item.id"/>
          </div>
          </el-tab-pane>
          <el-tab-pane label="已结束">
            <div class="acti-list-ed">
              <ul>
                <li class="one-night-stand">
                <img src="./album-myPhoto/1.jpg">
                <h3>一夜情？！（害怕ing）</h3>
                <p>活动时间：2017-8-1至2017-8-30</p>
                <el-rate class="marks"
                  v-model="mark1"
                  disabled
                  show-text
                  text-color="#ff9900"
                  text-template="{value}">
                </el-rate>
                <el-button  type="text"  @click="evaluateActi = true"  class="chack-acti">评价</el-button>
                <el-dialog title="评价本活动" :visible.sync="evaluateActi">
                  <el-form :model="form">
                    <el-form-item label="活动评价" :label-width="formLabelWidth">
                      <el-input v-model="form.evaluate" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="活动评分" :label-width="formLabelWidth">
                      <el-rate
                        v-model="markActi"
                        show-text class="acti-mark">
                      </el-rate>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="evaluateActi = false">取 消</el-button>
                    <el-button type="primary" @click="evaluateActi = false">确 定</el-button>
                  </div>
                </el-dialog>
                </li>
                <li class="one-night-stand">
                <img src="./album-myPhoto/1.jpg">
                <h3>一夜情？！（害怕ing）</h3>
                <p>活动时间：2017-8-1至2017-8-30</p>
                <el-rate class="marks"
                  v-model="mark2"
                  disabled
                  show-text
                  text-color="#ff9900"
                  text-template="{value}">
                </el-rate>
                 <el-button type="text"  @click="evaluateActi = true"  class="chack-acti">评价</el-button>
                </li>
              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import Card from '@/widget/Card/card';
  export default {
    name: 'myActivity',
    components:{
      Card,
    },
    data() {
      return {
        evaluateActi: false,
        form: {
          evaluate: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        activity: [
            {
              title: '一夜情',
              id:1,
              intro: 'hello',
              date: '2017-10-9 至 2017-11-9'
            },
            {
              title: '一夜情',
              id:1,
              intro: 'hello',
              date: '2017-10-9 至 2017-11-9'
            },


        ],
        formLabelWidth: '120px',
        markActi: null,
        mark2:4.1,
        mark1:3.7,
      };
    },
    methods: {
      moodDel(id){
        this.$confirm('永久删除该心情, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var mood=document.getElementById(id);
          mood.parentNode.removeChild(mood);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
    },
  };
</script>

<style>
  #myActivity {
    width: 100%;
    height: 100%;
  }
  ul{
    list-style-type: none;
  }
  .acti_lists{
    display: flex;
    flex-wrap:wrap;
  }

  .card {
    margin: 10px;
    width: 30%;
  }
  .card:hover {
    box-shadow: 2px 2px 12px rgba(0,0,0,.12);
    transition: box-shadow 0.15s;
  }
  .acti-list-being li,.acti-list-ed li{
    display: inline-block;
    padding: 20px;
    border: 1px solid #80808073;
    border-radius: 5px;
    margin: auto 10px;
    max-width: 200px;
  }
  .acti-list-being img,.acti-list-ed img{
    width: 100%;
    max-width: 100%;
    max-height: 200px;
  }
  .acti-list-being h3,.acti-list-ed h3{
    margin-bottom: -5px;
    margin-top: 10px;
  }
  .acti-list-ed p {
    font-size: 12px;
  }
  .chack-acti{
    float: right;
  }
  .acti-mark{
    position: relative;
    top: 8px;
  }
  .marks{
    float: left;
  }
  
</style>